<template>
  <!-- 卢比流转记录 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="goldDataList" @query="getGoldList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="用户ID:" label-width="60px">
            <el-input type="number" v-model="listQuery.user_id" clearable placeholder="请输入用户ID"></el-input>
          </el-form-item>
          <el-form-item label="日期时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="true"/>
          </el-form-item>
          <el-form-item label="变动原因:" label-width="80px">
            <el-select v-model="listQuery.reason" placeholder="请选择变动原因" filterable>
              <el-option v-for="(item,index) in reasonDataList" :key="index" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="货币类型:" label-width="80px">
            <el-select v-model="listQuery.amount_type" placeholder="请选择货币类型" filterable>
              <el-option v-for="(item,index) in GAME_CURRENCY_TYPE" :key="index" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <div class="flexDetween">
            <el-button type="info" size="mini" icon="el-icon-refresh" @click="getGoldList">刷新</el-button>
            <el-button type="primary" size="mini" icon="el-icon-download" :disabled="!goldDataList.length"  @click="getExport">导出</el-button>
          </div>
        </template>
        <template>
          <el-table-column prop="user_id" label="用户ID" align="center" width="120"/>
          <el-table-column prop="nick_name" label="用户昵称" align="center" width="150" show-overflow-tooltip/>
          <el-table-column prop="account_type" label="账户类型" align="center" width="150">
            <template slot-scope="scope">
              <el-tag :type="accountTag(scope.row.account_type)">{{ accountType(scope.row.account_type)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="amount_type" label="货币类型" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ amountType(scope.row.amount_type)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="变动原因" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ reasonType(scope.row.reason)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reason_data" label="原因详情" align="center" width="150" show-overflow-tooltip/>
          <el-table-column prop="amount" label="变动金额" align="center" width="150">
            <template slot-scope="scope">
              <span :class="scope.row.amount>0?'colorGre':'colorRed'">{{ scope.row.amount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="before_amount" label="变动前金额" align="center" width="150">
            <template slot-scope="scope">
              <span :class="scope.row.before_amount>0?'colorGre':'colorRed'">{{ scope.row.before_amount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="after_amount" label="变动后金额" align="center" width="150">
            <template slot-scope="scope">
              <span :class="scope.row.after_amount>0?'colorGre':'colorRed'">{{ scope.row.after_amount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="变动时间" align="center" width="200"/>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getGoldList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  currencyReason,
  currencyFluctuation,
  getCurrencyExport
} from '@/api/player'
import {
  ACCOUNT_TYPE,
  GAME_CURRENCY_TYPE
} from '@/utils/enum'

import SearchTable from '@/components/SearchTable'
export default {
  name: 'wander',
  components: {
    SearchTable
  },
  data () {
    return {
      ACCOUNT_TYPE,
      GAME_CURRENCY_TYPE,
      listQuery: {
        page: 1,
        size: 50,
        user_id:'',
        reason:'',
        agent_id:'',
        amount_type:'',
        dateTime: [this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      listLoading: true,
      currentTotal: 0,
      goldDataList: [],
      reasonDataList: [],
    }
  },
  created () {
    // this.getReasonList()
  },
  activated () {
    this.getReasonList()
  },
  methods: {
    // 获取货币变动原因
    async getReasonList () {
      let that = this;
      that.reasonDataList = []
      const response = await currencyReason({})
      if (response.code == 1) {
        if (response.data) {
          for (const key in response.data) {
            if(typeof(response.data[key])=='string'){
              that.reasonDataList.push({label:response.data[key],value:Number(key)})
            }
          }
          that.getGoldList()
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 获取货币变动列表
    async getGoldList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.goldDataList = []
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response = await currencyFluctuation(params)
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item=>{
            item.time=that.$public.timeTurn(item.time)
            item.amount=that.$public.mathNumberDivideWan(item.amount)
            item.before_amount=that.$public.mathNumberDivideWan(item.before_amount)
            item.after_amount=that.$public.mathNumberDivideWan(item.after_amount)
          })
        }
        that.goldDataList = response.data.list
        that.currentTotal = response.data.total
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 导出
    getExport(){
      let that = this,serveUrl=process.env.VUE_APP_BASE_API.substring(0,process.env.VUE_APP_BASE_API.length-6);
      getCurrencyExport(that.listQuery).then(res => {
        if (res.code == 1) {
          window.open(serveUrl+res.data)
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 账号类型展示
    accountType(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.label || "测试账号");
    },
    // 账号类型展示
    accountTag(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.type || "-");
    },
    // 货币类型
    amountType(cellValue){
      return (this.GAME_CURRENCY_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 变动原因
    reasonType(cellValue){
      return (this.reasonDataList.find((item) => item.value === cellValue)?.label || "-");
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        user_id:'',
        reason:'',
        agent_id:'',
        amount_type:'',
        dateTime: [this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      }
      this.getGoldList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.nameInfo {
  color: #409EFF;
  padding-bottom: 2px;
  border-bottom:1px solid #409EFF;
  cursor: pointer;
}
</style>
